<template>
  <ContentWrap>
    <el-table :data="data.list">
      <el-table-column align="center" prop="id" label="ID" />
      <el-table-column align="center" prop="name" label="名称" />
      <el-table-column align="center" prop="ext" label="格式" />
      <el-table-column align="center" prop="creator" label="创建人" />
      <el-table-column align="center" prop="size" label="大小" />
      <el-table-column align="center" prop="createTime" label="创建日期" />
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button type="primary" @click="preview(scope.row.previewUrl)">预览</el-button>
          <el-button type="primary" @click="handleDownload(scope.row)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNo"
      :total="data.total"
      @pagination="page"
    />
  </ContentWrap>
  <el-dialog
    v-model="showDialog"
    :title="dialogTitle"
    left
    class="drag-dialog small-padding-dialog"
    width="40%"
    destroy-on-close
    align-center
  >
    <el-select v-model="selectWater" style="width: 100%" placeholder="请选择水印">
      <el-option v-for="item in markList" :key="item.id" :label="item.text" :value="item.id" />
    </el-select>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="down">下载</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import * as resourceApi from '@/api/resource'
import { ref, reactive } from 'vue'
import * as watermarkApi from '@/api/watermark'
import { ElMessage } from 'element-plus'
import download from '@/utils/download'
import * as previewApi from '@/api/preview'
import {Base64} from "js-base64";

const showDialog = ref(false)
const dialogTitle = ref('选择水印')
const data = ref([])
const preview = (url) => {
  //window.open(previewUrl)
  previewApi.preview(Base64.encode(url))
}
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: null,
  createTime: []
})
const page = async () => {
  data.value = await resourceApi.queryFilePage(queryParams)
}
const markList = ref([])
const downData = ref({})
const handleDownload = async (row) => {
  downData.value = row
  if (downData.value.ext == 'pdf') {
    showDialog.value = true
    markList.value = await watermarkApi.list()
  } else {
    const res = await resourceApi.download(downData.value.id, 0)
    if (downData.value.ext == 'xml') {
      download.xml(res, downData.value.name + '.xml')
    }
  }
}
const selectWater = ref()

const down = async () => {
  const res = await resourceApi.download(downData.value.id, selectWater.value)
  if (downData.value.ext == 'pdf') {
    if (!selectWater.value) {
      ElMessage('请选择水印！')
    }
    download.pdf(res, downData.value.name + '.pdf')
  }
}
/** 初始化 **/
onMounted(() => {
  page()
})
</script>

<style scoped>
.el-dialog .el-dialog__body {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
